<template>
  <div>
    <div class="wrap-header">
      <div class="page-name font-24-B">红人搜索</div>
      <div class="page-tips font-14">集结YouTube、TikTok、Instagram优质社媒平台；海量红人资源，一键链接，红人精确匹配率高达98%</div>
      <div class="search">
        <div class="search-box flex flex-align-items-center">
          <div class="platform-list flex">
            <div v-for="(item, index) in platformList" :key="index" class="flex-center flex-align-items-center pointer"
              :class="{ active: searchForm.source === item.name }" @click="platformChange(item.name)">
              <img :src="item.icon">
            </div>
          </div>
          <el-popover placement="bottom-start" :width="348" trigger="click">
            <template #reference>
              <div class="search-field flex-center flex-align-items-center pointer">
                <p class="font-14">{{ fieldList.find(item => item.value === searchForm.keywordType).name }}</p>
                <i class="iconfont icon-jiantou_zuoyouqiehuan"></i>
              </div>
            </template>
            <div class="search-field-popup flex">
              <div v-for="(item, index) in fieldList" :key="index"
                class="search-field-item flex-center flex-column flex-align-items-center pointer"
                :class="{ active: searchForm.keywordType === item.value }" @click="fieldChange(item.value)">
                <img :src="item.icon">
                <p class="font-12">{{ item.name }}</p>
              </div>
            </div>
          </el-popover>
          <p class="line"></p>
          <el-input v-model="searchForm.keyword"
            :placeholder="fieldList.find(item => item.value === searchForm.keywordType).placeholder" maxlength="200"
            style="flex: 1;height: 44px;" />
          <el-popover placement="bottom" :width="104" trigger="hover">
            <template #reference>
              <div class="save-record-btn flex-center flex-align-items-center pointer" @click="searchCriteriaSavedChange">
                <i class="iconfont icon-baocun"></i>
              </div>
            </template>
            <div class="save-record-explain font-12">
              保存的搜索条件
            </div>
          </el-popover>
          <div class="search-btn flex-center flex-align-items-center pointer" @click="searchConfirm">
            <i class="iconfont icon-sousuo"></i>
            <span class="font-16-M">搜索</span>
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="condition">
        <div class="condition-top flex-between">
          <div class="select-btns flex">
            <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
              @show="selectShowChange('catesShow', true)" @hide="selectShowChange('catesShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.categoryIds.length > 0, active: selectShow.catesShow }">
                  <span class="font-14">分类{{ searchForm.categoryIds.length > 0 ? `(${searchForm.categoryIds.length})` : ''
                  }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <checkbox-popup :list="cateList" :checked="searchForm.categoryIds"
                @change="e => selectChange(e, 'categoryIds')"></checkbox-popup>
            </el-popover>
            <el-popover placement="bottom-start" :width="841" trigger="click" :show-arrow="false"
              @show="selectShowChange('areasShow', true)" @hide="selectShowChange('areasShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.countryIds.length > 0, active: selectShow.areasShow }">
                  <span class="font-14">国家{{ searchForm.countryIds.length > 0 ? `(${searchForm.countryIds.length})` : ''
                  }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <checkbox-popup :list="countryList" :checked="searchForm.countryIds"
                @change="e => selectChange(e, 'countryIds')"></checkbox-popup>
            </el-popover>
            <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
              @show="selectShowChange('fansShow', true)" @hide="selectShowChange('fansShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.fansNum !== -1, active: selectShow.fansShow }">
                  <span class="font-14">{{ searchForm.fansNum === -1 ? '粉丝量' :
                    searchForm.fansNum.toString().split('-').length >
                      1
                      ?
                      searchForm.fansNum : `${searchForm.fansNum}以上` }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <radio-range-popup :list="data.fansList" :checked="searchForm.fansNum" minPlaceholder="最小值"
                maxPlaceholder="最大值" @change="e => selectChange(e, 'fansNum')"></radio-range-popup>
            </el-popover>
            <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
              @show="selectShowChange('averageViewsShow', true)" @hide="selectShowChange('averageViewsShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.avgPlayNum !== -1, active: selectShow.averageViewsShow }">
                  <span class="font-14">{{ searchForm.avgPlayNum === -1 ? '平均观看量' :
                    searchForm.avgPlayNum.toString().split('-').length > 1 ?
                      searchForm.avgPlayNum : `${searchForm.avgPlayNum}以上` }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <radio-range-popup :list="data.averageViews" :checked="searchForm.avgPlayNum" minPlaceholder="最小值"
                maxPlaceholder="最大值" @change="e => selectChange(e, 'avgPlayNum')"></radio-range-popup>
            </el-popover>
            <el-popover placement="bottom" :width="194" trigger="click" :show-arrow="false"
              @show="selectShowChange('averageInteractionRateShow', true)"
              @hide="selectShowChange('averageInteractionRateShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.avgInteractRate !== -1, active: selectShow.averageInteractionRateShow }">
                  <span class="font-14">{{ searchForm.avgInteractRate === -1 ? '平均互动率' :
                    searchForm.avgInteractRate.toString().split('-').length > 1 ?
                      `${searchForm.avgInteractRate.toString().split('-')[0]}%-${searchForm.avgInteractRate.toString().split('-')[1]}%`
                      : `${searchForm.avgInteractRate}%以上` }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <radio-range-popup :list="data.averageInteractionRate" :checked="searchForm.avgInteractRate"
                minPlaceholder="最小值 %" maxPlaceholder="最大值 %"
                @change="e => selectChange(e, 'avgInteractRate')"></radio-range-popup>
            </el-popover>
            <el-popover placement="bottom" :width="118" trigger="click" :show-arrow="false"
              @show="selectShowChange('releaseTimeListShow', true)"
              @hide="selectShowChange('releaseTimeListShow', false)">
              <template #reference>
                <div class="select-btn flex-between flex-align-items-center pointer"
                  :class="{ selected: searchForm.lastReleaseTime !== -1, active: selectShow.releaseTimeListShow }">
                  <span class="font-14">{{ searchForm.lastReleaseTime === -1 ? '最近发布' :
                    `${searchForm.lastReleaseTime}天内` }}</span>
                  <i class="iconfont icon-xiajiantou"></i>
                </div>
              </template>
              <release-time-popup :list="data.releaseTimeList" :checked="searchForm.lastReleaseTime"
                @change="e => selectChange(e, 'lastReleaseTime')"></release-time-popup>
            </el-popover>
          </div>
          <div class="condition-btns flex">
            <p class="font-14 pointer">保存</p>
            <p class="font-14 pointer" @click="reset">清除</p>
            <p class="font-14 pointer" @click="searchConfirm">确定</p>
          </div>
        </div>
      </div>

      <no-data v-if="list.length === 0"></no-data>
      <div v-else class="table">
        <el-table v-loading="loading" :data="list" :height="tableHeight" style="width: 100%;" class="table"
          @selection-change="handleSelectionChange" @row-click="tableRowHandle">
          <el-table-column type="selection" width="60" fixed="left" />
          <el-table-column label="全选" fixed="left" width="400">
            <template #default="scope">
              <div class="flex">
                <div class="row-user pointer" @click="toDetail">
                  <img :src="scope.row.avatar">
                  <p class="font-18-M">{{ scope.row.score }}</p>
                </div>
                <div class="row-info">
                  <el-popover placement="top" trigger="hover">
                    <template #reference>
                      <div class="row-name flex flex-align-items-center pointer" @click="toDetail">
                        <p class="font-18-B">{{ scope.row.name }}</p>
                        <img v-if="scope.row.openEmail" src="@/assets/hasmail.svg">
                      </div>
                    </template>
                    <div class="row-info-explain">
                      <p class="font-12">{{ scope.row.name }}</p>
                      <p class="font-12">频道ID：{{ scope.row.name }}</p>
                    </div>
                  </el-popover>
                  <div v-if="scope.row.category && scope.row.category.length > 0" class="item-tags flex">
                    <p v-for="(tag, tagIndex) in scope.row.category.slice(0, 3)" :key="tagIndex" class="item-tag font-12">
                      {{
                        tag.name
                      }}
                    </p>
                    <el-popover v-if="scope.row.category.length > 3" width="250" placement="bottom" trigger="hover">
                      <template #reference>
                        <div class="row-tag-more flex-center flex-align-items-center">
                          <i class="iconfont icon-gengduo"></i>
                        </div>
                      </template>
                      <div class="row-all-tags flex flex-wrap">
                        <p v-for="(tag, tagIndex) in scope.row.tags.slice(0, 3)" :key="tagIndex" class="item-all-tag">{{
                          tag.name
                        }}
                        </p>
                      </div>
                    </el-popover>
                  </div>
                  <div v-if="scope.row.country" class="row-location flex flex-align-items-center">
                    <i class="iconfont icon-weizhi"></i>
                    <p class="">{{ scope.row.country }}</p>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="176">
            <template #default="scope">
              <div class="row-data">
                <div class="flex-between">
                  <p class="font-14">粉丝量</p>
                  <p class="font-14">{{ numConvert(scope.row.fans_num, 2) }}</p>
                </div>
                <div class="flex-between">
                  <p class="font-14">平均观看量</p>
                  <p class="font-14">{{ numConvert(scope.row.avg_play_num, 2) }}</p>
                </div>
                <div class="flex-between">
                  <p class="font-14">平均互动率</p>
                  <p class="font-14">
                    {{ scope.row.avg_interact_rate ? `${scope.row.avg_interact_rate * 100}%` : '-' }}
                  </p>
                </div>
                <div class="flex-between">
                  <p class="font-14">商业合作数</p>
                  <p class="font-14">{{ numConvert(scope.row.business_num, 2) }}</p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="scope">
              <div class="row-files flex">
                <div v-for="(pro, proIndex) in scope.row.videos.concat(scope.row.images).slice(0, 3)" :key="proIndex"
                  class="row-file pointer" @click="toLink(pro.link)">
                  <img :src="pro.image">
                  <p v-if="pro.fileType === 'video'" class="flex-center flex-align-items-center">
                    <i class="iconfont icon-bofang"></i>
                  </p>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column width="260">
            <template #default="scope">
              <div class="row-btns flex">
                <el-tooltip content="收藏" placement="top" effect="light">
                  <p class="row-btn flex-center flex-align-items-center pointer" :class="{ active: scope.row.collect }"
                    @click.stop="influencerFavoriteChange(scope.$index)">
                    <i class="iconfont"
                      :class="scope.row.collect ? 'icon-guanzhu-yiguanzhu' : 'icon-guanzhu-weiguanzhu'"></i>
                  </p>
                </el-tooltip>
                <el-tooltip content="添加至推广计划" placement="top" effect="light">
                  <p class="row-btn flex-center flex-align-items-center pointer">
                    <i class="iconfont icon-xinzengjihua"></i>
                  </p>
                </el-tooltip>
                <el-tooltip content="更多" placement="top" effect="light">
                  <p class="row-btn flex-center flex-align-items-center pointer" @click.stop="moreVideoChange(scope.row)">
                    <i class="iconfont icon-gengduo1"></i>
                  </p>
                </el-tooltip>
                <el-tooltip :content="scope.row.hide ? '显示红人' : '隐藏红人'" placement="top" effect="light">
                  <p class="row-btn flex-center flex-align-items-center pointer">
                    <i class="iconfont" :class="scope.row.hide ? 'icon-guankan' : 'icon-yincang'"></i>
                  </p>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="filter-table flex flex-align-items-center">
          <div class="switch-btns flex">
            <div class="switch-btn flex flex-align-items-center">
              <el-switch size="small" />
              <span class="font-14">计划外红人</span>
            </div>
            <div class="switch-btn flex flex-align-items-center">
              <el-switch size="small" />
              <span class="font-14">本账号未联系</span>
            </div>
            <div class="switch-btn flex flex-align-items-center">
              <el-switch size="small" />
              <span class="font-14">所有账号未联系</span>
            </div>
          </div>
          <div class="sort-btns flex">
            <!-- <el-popover placement="top" :width="80" trigger="hover">
              <template #reference>
                <div class="sort-btn flex-center flex-align-items-center">
                  <i class="iconfont icon-mail"></i>
                  <span class="font-14">有邮箱</span>
                </div>
              </template>
              <div class="save-record-explain font-12">
                是否有邮箱
              </div>
            </el-popover> -->
            <el-dropdown :hide-on-click="false" trigger="click" @command="handleCommand">
              <div class="sort-btn flex flex-align-items-center pointer">
                <i class="item-title-right iconfont icon-paixu"></i>
                <span class="font-14">{{ data.sortList.find(item => item.value === searchForm.sort).name }}</span>
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item v-for="(item, index) in data.sortList" :key="index" :command="item.value">
                    <span :class="{ 'el-dropdown-active': item.value === searchForm.sort }">{{ item.name }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="pagination flex">
    <el-pagination layout="prev, pager, next, total" :total="confirmForm.total" @current-change="currentChange" />
  </div>

  <upgrade-benefits v-if="upgradeBenefitsShow" @close="upgradeBenefitsShowChange"></upgrade-benefits>
  <search-criteria-saved v-if="searchCriteriaSavedShow" @change="conditionChange"
    @close="searchCriteriaSavedChange"></search-criteria-saved>

  <more-video v-if="moreVideoDetail.show" :item="moreVideoDetail" @close="moreVideoDetail.show = false"></more-video>
</template>

<script setup>
import MoreVideo from '@/components/moreVideo.vue';
import UpgradeBenefits from '@/components/upgradeBenefits.vue';
import SearchCriteriaSaved from '@/views/home/components/searchCriteriaSaved.vue';
import CheckboxPopup from '@/views/home/components/checkboxPopup.vue';
import RadioRangePopup from '@/views/home/components/radioRangePopup.vue';
import ReleaseTimePopup from '@/views/home/components/releaseTimePopup.vue';
import NoData from '@/views/home/components/noData.vue';
import { ref, onMounted } from 'vue';
import api from '@/api/index.js';
import data from '@/js/data.js';
import numConvert from '@/js/numConvert';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';

const router = useRouter();

const tableHeight = ref(window.innerHeight - 410);
const upgradeBenefitsShow = ref(false);
const searchCriteriaSavedShow = ref(false);
const moreVideoDetail = ref({
  show: false
});
const platformList = [
  {
    name: "youtube",
    icon: require('../../../../assets/icon-1.png')
  },
  {
    name: "tiktok",
    icon: require('../../../../assets/icon-2.png')
  },
  {
    name: "instagram",
    icon: require('../../../../assets/icon-3.png')
  }
];
const fieldList = [
  {
    name: "关键词",
    value: 'keyword',
    placeholder: "请输入通用词或品牌词，如clothing, skirt, shein",
    icon: require('../../../../assets/keyword.svg')
  },
  {
    name: "红人名",
    value: 'influencerName',
    placeholder: "请输入红人名或者频道名",
    icon: require('../../../../assets/name.svg')
  },
  {
    name: "主页链接",
    value: 'homeLink',
    placeholder: "请输入红人的社交媒体主页链接",
    icon: require('../../../../assets/link.svg')
  }
];

const searchForm = ref({
  source: 'youtube',
  keywordType: 'keyword',
  keyword: '',
  categoryIds: [],
  countryIds: [],
  fansNum: -1,
  avgPlayNum: -1,
  avgInteractRate: -1,
  lastReleaseTime: -1,
  sort: undefined
});
const confirmForm = ref({
  source: 'youtube',
  page: 1,
  perPage: 10
});
const selectShow = ref({
  catesShow: false,
  areasShow: false,
  fansShow: false,
  averageViewsShow: false,
  averageInteractionRateShow: false,
  releaseTimeListShow: false
});
const list = ref([]);
const cateList = ref([]);
const countryList = ref([]);
const loading = ref(false);

// 显示或隐藏升级权益弹窗
const upgradeBenefitsShowChange = () => {
  upgradeBenefitsShow.value = !upgradeBenefitsShow.value;
}
const platformChange = e => {
  if (searchForm.value.source !== e) {
    searchForm.value.source = e;
  }
}
const fieldChange = e => {
  if (searchForm.value.keywordType !== e) {
    searchForm.value.keywordType = e;
  }
}
const selectChange = (e, field) => {
  searchForm.value[field] = e;
}
const selectShowChange = (field, value) => {
  selectShow.value[field] = value;
}
// 选择保存的搜索条件
const conditionChange = e => {
  console.log(e);
}
// 显示或隐藏保存的搜索条件框
const searchCriteriaSavedChange = () => {
  searchCriteriaSavedShow.value = !searchCriteriaSavedShow.value;
}
const searchConfirm = () => {
  confirmForm.value = {
    ...searchForm.value,
    page: 1,
    perPage: 10,
    categoryIds: searchForm.value.categoryIds && searchForm.value.categoryIds.length > 0 ? searchForm.value.categoryIds : undefined,
    countryIds: searchForm.value.countryIds && searchForm.value.countryIds.length > 0 ? searchForm.value.countryIds : undefined,
    fansNum: searchForm.value.fansNum === -1 ? undefined : { min_value: searchForm.value.fansNum.toString().split('-')[0], max_value: searchForm.value.fansNum.toString().split('-')[1] },
    avgPlayNum: searchForm.value.avgPlayNum === -1 ? undefined : { min_value: searchForm.value.avgPlayNum.toString().split('-')[0], max_value: searchForm.value.avgPlayNum.toString().split('-')[1] },
    avgInteractRate: searchForm.value.avgInteractRate === -1 ? undefined : { min_value: searchForm.value.avgInteractRate.toString().split('-')[0] / 100, max_value: searchForm.value.avgInteractRate.toString().split('-')[1] / 100 },
    lastReleaseTime: searchForm.value.lastReleaseTime === -1 ? undefined : searchForm.value.lastReleaseTime + 'day',
    sortRule: searchForm.value.sort ? { column: searchForm.value.sort, sortType: 'desc' } : undefined
  };
  querySensationList(1);
}
const reset = () => {
  searchForm.value = {
    source: 'youtube',
    keywordType: 'keyword',
    keyword: '',
    categoryIds: [],
    countryIds: [],
    fansNum: -1,
    avgPlayNum: -1,
    avgInteractRate: -1,
    lastReleaseTime: -1,
    sort: undefined,
    total: 0
  };
  confirmForm.value = {
    source: 'youtube',
    page: 1,
    perPage: 10
  };
  querySensationList(1);
}
const handleCommand = e => {
  e = typeof (e) === 'string' ? e : undefined;
  if (searchForm.value.sort !== e) {
    searchForm.value.sort = e;
    confirmForm.value.sortRule = e ? { column: e, sortType: 'desc' } : undefined;
    querySensationList(1);
  }
}
const currentChange = e => {
  querySensationList(e);
}
// 获取红人分类
const queryCateList = () => {
  api.sensation.queryCateList().then(res => {
    cateList.value = res.map(item => {
      item.children = item.categories;
      return item;
    });
  });
}
// 获取国家列表
const queryCountryList = () => {
  api.sensation.queryCountryList().then(res => {
    countryList.value = res.filter(item => item.countries.length).map(item => {
      item.children = item.countries;
      return item;
    });
  });
}
// 获取红人列表
const querySensationList = e => {
  confirmForm.value.page = e;
  api.sensation.querySensationList(confirmForm.value).then(res => {
    list.value = res.list.map(item => {
      item.videos = Array.isArray(item.videos) ? item.videos.map(item1 => {
        item1.type = 'video';
        return item1;
      }) : [];
      item.images = Array.isArray(item.images) ? item.images : [];
      return item;
    });
    confirmForm.value.total = res.total;
  });
}
// 收藏或取消收藏
const influencerFavoriteChange = index => {
  let inter = null;
  if (list.value[index].collect) {
    inter = api.sensation.unfavoriteInfluencer;
  } else {
    inter = api.sensation.favoriteInfluencer;
  }
  loading.value = true;
  inter({ influencerId: list.value[index].influencer_id }).then(() => {
    if (list.value[index].collect) {
      ElMessage.success('取消收藏成功');
    } else {
      ElMessage.success('收藏成功');
    }
    loading.value = false;
    list.value[index].collect = !list.value[index].collect;
  }).catch(err => {
    loading.value = false;
    ElMessage.error(err.msg);
  });
}
const tableRowHandle = row => {
  router.push(`/kocNewDetail?id=${row.influencer_id}`);
}
const toLink = url => {
  window.open(url, '_blank')
}
const moreVideoChange = e => {
  moreVideoDetail.value = {
    ...e,
    show: true
  }
}

onMounted(() => {
  queryCateList();
  queryCountryList();
  querySensationList(1);
});
</script>

<style lang="less" scoped>
.wrap-header {
  height: 206px;
  background: #f9f0f7;
  padding: 24px 40px 16px;

  .page-name {
    width: 102px;
    height: 32px;
    color: #12172c;
    line-height: 32px;
    letter-spacing: 1px;
    margin-bottom: 8px;
  }

  .page-tips {
    width: 800px;
    height: 20px;
    color: #333;
    line-height: 20px;
    letter-spacing: 1px;
    margin-bottom: 24px;
  }
}

.search {
  min-width: 1140px;

  .search-box {
    height: 82px;
    padding: 20px 32px 20px 24px;
    border-radius: 20px;
    box-shadow: 0 4px 15px 0 rgba(101, 40, 53, .1);
    background: #fff;

    .platform-list {
      width: 158px;
      height: 44px;
      background: #f8f8f8;
      border-radius: 10px;
      display: flex;
      margin-right: 8px;

      div {
        width: 54px;
        height: 44px;
        border-radius: 10px;

        &.active {
          background: rgba(255, 82, 119, .1);
          border: 1px solid @main-color;
        }

        img {
          width: 24px;
          height: 24px;
        }
      }
    }

    .search-field {
      width: 128px;
      height: 44px;
      border-radius: 10px;
      margin-right: 8px;

      &:hover {
        background: #f8f8f8;
      }

      p {
        color: #333;
        margin-right: 11px;
      }

      i {
        color: #9a9a9a;
      }
    }

    .line {
      width: 1px;
      height: 30px;
      background: #f2f2f2;
      margin-right: 16px;
    }

    ::v-deep .el-input,
    ::v-deep .el-input__wrapper {
      border: none !important;
      background: none !important;
      box-shadow: none !important;
    }

    .save-record-btn {
      margin-left: 30px;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: #f8f8f8;

      &:hover {
        i {
          color: @main-color;
        }
      }

      i {
        font-size: 24px;
        color: #999;
      }
    }

    .search-btn {
      margin-left: 15px;
      width: 120px;
      height: 42px;
      background: linear-gradient(140deg, #a775ff, @main-color);
      border-radius: 12px;

      i {
        font-size: 20px;
        color: #fff;
        margin-right: 10px;
      }

      span {
        color: #fff;
      }
    }
  }
}

.search-field-popup {
  padding: 10px 16px 8px;

  .search-field-item {
    width: 100px;
    height: 80px;
    border-radius: 10px;

    &:hover,
    &.active {
      background: #ffedf1;

      p {
        color: @main-color;
      }
    }

    img {
      width: 24px;
      height: 24px;
      margin-bottom: 4px;
    }

    p {
      color: #333;
    }
  }
}

.save-record-explain {
  text-align: center;
  line-height: 37px;
  color: #333;
}

.main {
  background: #fff;
}

.condition {
  padding: 16px 24px;

  .select-btns {
    margin-bottom: 16px;

    .select-btn {
      min-width: 118px;
      height: 32px;
      border-radius: 6px;
      background: #fff;
      padding-left: 12px;
      padding-right: 8px;
      margin-right: 8px;
      border: 1px solid #f2f2f2;

      &.selected {
        background: #ffedf1;

        span,
        i {
          color: @main-color;
        }
      }

      &.active {
        background: #ffedf1;
        border: 1px solid @main-color;

        span,
        i {
          color: @main-color;
        }
      }

      span {
        color: #333;
      }

      i {
        color: #999;
        font-size: 12px;
      }
    }
  }

  .condition-btns {
    margin-bottom: 16px;

    p {
      width: 64px;
      height: 32px;
      border-radius: 6px;
      color: #666;
      background: #f8f8f8;
      text-align: center;
      line-height: 32px;
      margin-right: 10px;

      &:last-child {
        background: #ffeef1;
        color: @main-color;
        margin-right: 0;

        &:hover {
          background: @main-color;
          color: #fff;
        }
      }
    }
  }
}

.table {
  position: relative;

  .filter-table {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 50;
    height: 39px;
    width: 652px;
    background: #f9f9f9;

    .switch-btns {
      .switch-btn {
        margin-right: 24px;

        &:last-child {
          margin-right: 0;
        }

        span {
          padding-left: 8px;
        }
      }
    }

    .sort-btns {
      .sort-btn {
        min-width: 100px;
        height: 34px;

        &:hover {
          background: #f8f8f8;
        }

        i {
          font-size: 14px;
          color: #606266;
        }

        span {
          color: #606266;
          margin-left: 8px;
        }
      }
    }
  }

  .row-user {
    width: 90px;
    height: 90px;
    position: relative;
    margin-right: 16px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    p {
      position: absolute;
      left: 0;
      bottom: 0;
      z-index: 10;
      width: 100%;
      text-align: center;
      line-height: 45px;
      color: #fff;
    }
  }

  .row-info {
    width: 254px;
    height: 90px;
    margin-right: 24px;

    .row-name {
      margin-bottom: 4px;

      &:hover {
        p {
          color: @main-color;
        }
      }

      p {
        color: #333;
        max-width: 230px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      img {
        margin-left: 8px;
        width: 20px;
      }
    }

    .row-tags {
      .row-tag {
        margin: 0 8px 10px 0;
        line-height: 24px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;
        font-size: 12px;
        padding: 0 8px;
        color: #606266;
      }

      .row-tag-more {
        width: 26px;
        height: 26px;
        background: hsla(0, 0%, 93%, .4);
        border-radius: 12px;
        border: 1px solid #dcdee0;

        i {
          color: #606266;
        }
      }
    }

    .row-location {
      i {
        color: #dcdee0;
        margin-right: 4px;
      }

      p {
        color: #666;
      }
    }
  }

  .row-data {
    div {
      margin-bottom: 4px;

      &:last-child {
        margin-bottom: 0;
      }

      p {
        color: #606266;
      }
    }
  }

  .row-files {
    .row-file {
      width: 146px;
      height: 88px;
      margin-right: 8px;
      position: relative;
      border-radius: 8px;
      overflow: hidden;

      &:hover {
        img {
          transform: scale(1.2);
        }

        p::after {
          background: @main-color;
          opacity: 1;
        }
      }

      img {
        width: 100%;
        height: 100%;
      }

      p {
        position: absolute;
        left: 56px;
        top: 28px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        overflow: hidden;
        z-index: 10;

        &::after {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          background: #000;
          opacity: 0.2;
        }

        i {
          position: relative;
          z-index: 20;
          color: #fff;
        }
      }
    }
  }

  .row-btns {
    justify-content: end;
    padding-right: 16px;

    .row-btn {
      width: 40px;
      height: 40px;
      background: #f2f2f2;
      border-radius: 14px;
      margin-right: 16px;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      &.disabled {
        cursor: no-drop;

        i {
          color: #dcdee0 !important;
        }
      }

      &.active {
        background: #ffedf1;

        i {
          color: @main-color;
        }
      }

      i {
        color: #999;
        font-size: 24px;
        margin-left: 0;
      }
    }
  }
}

.pagination {
  justify-content: end;
  position: fixed;
  left: 224px;
  bottom: 0;
  z-index: 100;
  width: calc(100vw - 224px);
  height: 56px;
  background: #fff;
  padding: 0 24px;
}

.el-dropdown-active {
  color: @main-color !important;
}
</style>
